<template>
  <div class="addPraise">
    <headNav></headNav>
    <div class="columnImg border-bottom">
        <div class="upImg" v-if="addPraiseImgUrl != '' ? true : false" @click="handelSelectIcon">
            <div class="imgBox">
                <VanImage
                round
                width="1.2rem"
                height="1.2rem"
                :src="addPraiseImgUrl"
                />
            </div>
        </div>
        <div class="upImg" v-else @click="handelSelectIcon">
            <div class="imgBox"><img src="./images/comment-icon1.png"></div>
            <div class="name">选择图标</div>
        </div>
    </div>

    <div class="columnName marT24 border-top border-bottom">
        <Field v-model="name" input-align="right" label="名称" maxlength="10" placeholder="请输入十个字内名称" />
    </div>

    <div class="columnNumber marT24">
        <div class="name">分值</div>
        <ul>
            <li v-for="(item,index) of numberList" :key="index">
                <div @click="handelNumber(index)" :class="numberItem==index ? 'active' :''">{{item}}</div>
            </li>
        </ul>
    </div>

    <div class="columnType marT24">
        <Field
            is-link
            readonly
            clickable
            name="picker"
            input-align="right"
            :value="typeName"
            label="分类"
            placeholder="请选择分类"
            @click="onOpenType"
        />
        <ActionSheet
            v-model="typeShow"
            :actions="typeList"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel"
            @select="onSelectType"
        />
    </div>

    <div class="columnClass marT24">
        <Cell center title="应用到我所有班级">
            <template #right-icon>
                <vantSwitch v-model="allSwitch" size="24" inactive-color="#dcdee0" />
            </template>
        </Cell>
    </div>

    <div class="confirmBtn">
        <Button type="info" block @click="handelConfirm">确定添加</Button>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav';
import { Field,ActionSheet,Cell,Switch,Button,Toast,Image as VanImage } from 'vant';
export default {
    name:'studentAppraiseAddPraise',
    components:{
        headNav,
        Field,
        ActionSheet,
        Cell,
        vantSwitch:Switch,
        Button,
        Toast,
        VanImage
    },
    data(){
        return {
            name:'',                            //名称
            numberItem:0,                      //分值对象
            numberList:[1,2,3,4,5,6,7,8,9,10],  //分值列表
            typeName:'',                        //分类名称
            typeItem:'',                        //分类对象
            typeList: [],                       //分类列表
            typeShow: false,                    //分类显示
            allSwitch:false,                    //应用到我所有班级
        }
    },
    computed: {
        schoolId (){
            return this.$store.state.user.schoolId
        },
        teacherId (){
            return this.$store.state.user.teacherId
        },
        addPraiseImgUrl () {
            return this.$store.state.studentAppraise.addPraiseImgUrl
        },
        classItem(){
            return this.$store.state.studentAppraise.classItem
        },
        evaluateType(){
            return this.$store.state.studentAppraise.evaluateType
        },
        currentPage(){
            return this.$store.state.studentAppraise.currentPage;
        },
        studentsInfo(){
            return this.$store.state.studentAppraise.studentsInfo;
        }
    },
    methods:{
        //打开分类
        onOpenType(){
            this.getStudentsReviewType();
        },
        //选择分类
        onSelectType(item){
            this.typeItem = item;
            this.typeName = item.name;
        },
        //分类取消
        onCancel() {
            Toast('取消');
        },
        //分值
        handelNumber(index){
            this.numberItem = index;
        },
        //选择图标
        handelSelectIcon(){
            this.$router.push('/studentAppraise/addPraiseIcon');
        },
        //添加成功
        handelConfirm(){
            if(!this.addPraiseImgUrl){
                return Toast('请选择图标');
            }
            let name = this.name.replace(/(^\s*)|(\s*$)/g, "");
            if(!name){
                return Toast('名称不能为空');
            }
            if(!this.typeItem){
                return Toast('请选择分类');
            }
            this.postReviewType();   
        },
        //创建点评类别
        postReviewType(){
            const params = {
                isUseAll: this.allSwitch,
                teacherId:this.teacherId,
                reviewType: {
                    schoolId:this.schoolId,
                    gradeId: this.classItem.gradeId,
                    classId: this.classItem.classId,
                    name:this.name,
                    imgUrl: this.addPraiseImgUrl,
                    parentId: this.typeItem.id,  
                    leaveCode: 2,
                    type: this.evaluateType,
                    score: this.numberItem+1,
                    status: 1
                }
            }
            for (var key in params) {
                if (!params[key]) {
                    delete params[key]
                }
            }
            this.$store.dispatch('studentAppraise/PostReviewType',params).then(res=>{
                Toast.success('创建成功');
                this.handelInitialize();
                if(this.currentPage == 0){
                    this.$router.push('/studentAppraise/index'); 
                }
                if(this.currentPage == 1){
                    this.$router.push('/studentAppraise/studentRecord'); 
                }
            })
        },
        //初始化
        handelInitialize(){
            this.name = '';                      
            this.numberItem = 0;                  
            this.typeName = '';                        
            this.typeItem = '';                                             
            this.typeShow = false;                   
            this.allSwitch = false;                   
        },
        //获取点评数据
        getStudentsReviewType(){
            const params = {
                leaveCode:1,
                isAll:false
            }
            this.$store.dispatch('studentAppraise/GetStudentsReviewType',params).then(res=>{
                if(res.status == 200){
                    if(res.data.length > 0){
                        this.typeList = res.data;
                        this.typeShow = true;
                    }else{
                        Toast('分类：暂无数据')
                    }                    
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.marT24{
    margin-top:0.24rem;
}
.addPraise{
    .columnImg{
        background-color:#fff;
        height: 2.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .upImg{
            width:1.2rem;
            text-align: center;
            .imgBox{
                width:1.2rem;
                height:1.2rem;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .name{
                font-size:0.28rem;
                color:#666;
                margin-top: 0.05rem;
            }
        }
    }
    .columnNumber{
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0.1rem 0.3rem 0.3rem;
        color: #323233;
        background-color: #fff;
        .name{
            flex: none;
            box-sizing: border-box;
            width: 1rem;
            margin-right: 12px;
            color: #646566;
            text-align: left;
            word-wrap: break-word;
            padding-top: 0.2rem;
        }
        ul{
            width: 100%;
            display: flex;
            flex-wrap:wrap;
            li{
                width:20%;
                margin-top:0.2rem;
                div{
                    width:0.68rem;
                    height:0.68rem;
                    background-color:#E6E6E6;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin:0 auto;
                    border-radius:0.68rem;
                    color:#999;
                }
                .active{
                    background-color: #128FEF;
                    color:#fff;
                }
            }
        }
    }
    .confirmBtn{
        box-sizing: border-box;
        padding:0 0.3rem;
        margin-top:0.5rem;
    }
}
</style>

